<template>
  <div class="tree-container">
    <el-input placeholder="请输入关键字搜索..." clearable size="mini" suffix-icon="el-icon-search" v-model="filterText"></el-input>
    <div class="tree-custom">
      <el-tree
        ref="tree"
        :default-expanded-keys="defaultExpandedKeys"
        :data="dataList"
        :props="defaultProps"
        :expand-on-click-node="expendOnClickNode"
        :filter-node-method="filterNode"
        :node-key="nodeKey"
        :highlight-current="highlightCurrent"
        v-loading="treeLoading"
        :current-node-key="currentNodeKey"
        @node-click="handleNodeClick"
        @click="click"
        :show-checkbox="showCheckbox"
        :check-strictly="checkStrictly"
        :default-checked-keys="defaultCheckedKeys"
      >
<!--        <template #default="{ node, data}">-->
<!--          <div class="custom-tree-node"-->
<!--               style="display: flex;justify-content: center;align-items: center;font-size: 14px;">-->
<!--            <span class="iconfont icon-a-jiafangzijianzhu icon-padding" v-if="data.deviceType === 0"></span>-->
<!--            <span class="iconfont icon-loudong icon-padding" v-if="data.deviceType === 1"></span>-->
<!--            <span class="iconfont icon-a-homezhuyefangzijia icon-padding" v-if="data.deviceType === 2"></span>-->
<!--            <span>{{ node.label }}</span>-->
<!--            <span v-if="data.deviceCount!=null" class="device-count">({{data.deviceCount}})</span>-->
<!--          </div>-->
<!--        </template>-->
      </el-tree>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Tree',
  props: {
    // 搜索框关键字
    filterText: {
      type: String,
      default: ''
    },
    // 默认展开的节点
    defaultExpandedKeys: {
      type: Array,
      default: () => []
    },
    // 树数据
    dataList: {
      type: Array,
      default: () => []
    },
    //默认选中节点
    defaultCheckedKeys:{
      type: Array,
      default: () => []
    },
    // 默认配置项
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: "children",
          label: "sheetsName"
        }
      }
    },
    // 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
    expendOnClickNode: {
      type: Boolean,
      default: false
    },
    // 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
    nodeKey: {
      type: String,
      default: ''
    },
    // 是否高亮当前选中节点，默认值是 false。
    highlightCurrent: {
      type: Boolean,
      default: true,
    },
    // 树加载状态
    treeLoading: {
      type: Boolean,
      default: false
    },
    // 当前选中的节点
    currentNodeKey: {
      type: String || Number,
      default: ''
    },
    // 是否展示复选框
    showCheckbox: {
      type: Boolean,
      default: false
    },
    //父子节点是否互相影响选择
    checkStrictly:{
      type: Boolean,
      default: true
    }
  },
  data(){
    return{

    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods:{
    setCheckedKey(data){
      debugger
      this.$refs.tree.setCheckedKeys(data);
    },
    //获取选中节点
    getCheckedNodes(){
      return this.$refs.tree.getCheckedNodes();
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.sheetsName.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      debugger
      this.$emit('onNodeClick', data)
    },
    click(data){
      debugger
      this.$emit('onCheck', data)
    }
  }
}
</script>
<style scoped lang="scss">
.tree-container{
  height: 100%;
  background: #fff;
  padding: 20px 10px 10px 10px;
}
.tree-custom {
  height: 82vh;
  max-height: 82vh;
  overflow-y: auto;
  margin-top: 10px;
}
// .el-tree {
//   //background-color: #fff;
//   ::v-deep & > .el-tree-node {
//     // 第一层
//     .el-checkbox__inner {// 未选中的 checkbox 样式
//       background: url('../../assets/images/tree/btn_unactive.png');
//       background-size: contain;
//       border: none;
//       //border-radius: none;
//       width: 16px;
//       height: 16px;
//     }
//     .is-checked .el-checkbox__inner {// 选中的 checkbox 样式
//       background: url('../../assets/images/tree/btn_tree_active.png');
//       background-size: contain;
//       border: none;
//       //border-radius: none;
//       width: 16px;
//       height: 16px;
//       &::after {
//         display:none;
//       }
//     }
//     .is-indeterminate .el-checkbox__inner {// 半选中的 checkbox 样式
//       background: url('../../assets/images/tree/btn_tree_ing.png');
//       background-size: contain;
//       border: none;
//       //border-radius: none;
//       width: 16px;
//       height: 16px;
//       &::before {
//         display:none;
//       }
//     }
//   }
// }
</style>
